

@mixin block {
	display: block;
	display: -webkit-box;
}

@mixin none {
  display: none;
}
@mixin flex {
	display: flex !important;
}
@mixin oh {
	overflow: hidden;
}

@mixin flex-direction {
	flex-direction: column;
}
@mixin flex-x-center {
	justify-content: center;
}
@mixin flex-x-between {
	justify-content: space-between;
}
@mixin flex-y-center {
	align-items: center;
}
@mixin box-sizing-border-box {
	box-sizing: border-box;
}

@mixin fl {
	float: left;
}

@mixin flex-x-y { // x轴水平居中 y轴水平居中
  @include flex;
  @include flex-x-center;
  @include flex-y-center;
}
.flex-x-y{ // x轴水平居中 y轴水平居中
  @include flex-x-y;
}

.flex-x-vertical{ // x轴水平居中 垂直布局
  @include flex;
  @include flex-x-center;
  @include flex-direction;
}

.flex-x-y-vertical{ // x轴水平居中 y轴水平居中 垂直布局
  @include flex-x-y;
  @include flex-direction;
}

@mixin pseudo-element{
  @include block;
  content: '';
}


@mixin position-center{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
